window.onload = function () {
    const positionSlider = document.getElementById('positionSlider');
    const animationDuration = document.getElementById('animationDuration');
    const animationDelay = document.getElementById('animationDelay');
    const sliderValue = document.getElementById('sliderValue');
    const durationValue = document.getElementById('durationValue');
    const delayValue = document.getElementById('delayValue');
    const animatedBox = document.getElementById('animatedBox');

    // 归一化函数 - 将0-1的值映射到指定范围
    function normalize(value, min, max) {
        return min + (max - min) * value;
    }

    // 更新动画属性
    function updateAnimation() {
        const position = parseFloat(positionSlider.value);
        const duration = parseInt(animationDuration.value);
        const delay = parseInt(animationDelay.value);


        sliderValue.textContent = position.toFixed(2);
        durationValue.textContent = duration;
        delayValue.textContent = delay;

        // 计算归一化后的位置 (0-1映射到容器宽度)
        const containerWidth = document.querySelector('.animation-container').clientWidth;
        const boxWidth = animatedBox.clientWidth;
        const maxLeft = containerWidth - boxWidth - 20; // 减去padding

        const leftPosition = normalize(position, 0, maxLeft);


        const hue = normalize(position, 200, 360);
        const scale = normalize(position, 0.8, 1.2);


        animatedBox.style.transitionDuration = `${duration}ms`;
        animatedBox.style.transitionDelay = `${delay}ms`;


        animatedBox.style.left = `${leftPosition}px`;
        animatedBox.style.backgroundColor = `hsl(${hue}, 70%, 60%)`;
        animatedBox.style.transform = `scale(${scale})`;
    }


    positionSlider.addEventListener('input', updateAnimation);
    animationDuration.addEventListener('input', updateAnimation);
    animationDelay.addEventListener('input', updateAnimation);
    // 添加动画结束监听器
    animatedBox.addEventListener('transitionend', () => {
        animatedBox.style.boxShadow = `0 0 20px rgba(77, 171, 247, 0.7)`;
        setTimeout(() => {
            animatedBox.style.boxShadow = 'none';
        }, 300);
    });
}